<!-- 这是一个新增编辑的表单 -->
<!-- 使用方法：
        1.此文件放在父组件下方
        2.在父组件使用此组件的标签
        3.父组件内定义组件开关、新增或编辑状态，传入两者加上id，通过id可以获取编辑回填，删除
        4.定义关闭函数，关闭时关闭开关
        <AddorEdit v-if="showDialog" 
          :visible="showDialog，父组件定义开关"
          @close="父组件定义关闭弹窗的函数"
          :id="在data中定义为空，在获取页面中得到id" 
          :is-edit=" isEdit，新增还是编辑的状态，在data中定义为false" />
 -->
<template>
   <el-dialog  :title=" isEdit ? '编辑' : '添加'" :visible.sync="dialogVisible" :before-close="handleClose">
  <div>
    <!-- 组件内容 -->
    <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option v-for="item in employees" :key="item.id" :value="item.username" :label="item.username" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </el-form-item>
  </el-form>
  </div>
  </el-dialog>
</template>

<script>
// 引入你自己的请求,
import { getEmployeeSimple,addtianjiazhuzu,getDepartDetail,updateDepartments } from "@/api/departments";
export default {
    created () {
    this.loadEmployee() // 这个是发生请求获取下拉列表
    this.loadDetail() // 这个编辑的数据回填
  },
  props:{
    // 弹窗开关
    visible:{
      type:Boolean,
      required: true
    },
    id:{
      type: String,
      required: true
    },
    isEdit:{
      type: Boolean,
      required: true
    },
    originList:{
      type:Array,
      required: true
    }
  },
  // 组件逻辑
  data() {
    // 自定义校验的函数
    const validCode = (rule, value, callback) => {
       // rule     : 当前的规则，没有用
          // value    : 被校验的值
          // callback : 回调 
          //      如果通过了规则检验，直接调用callback()
          //      如果没有通过规则检验，调用callback(错误对象，在错误对象中说明原因)
        	//      callback(new Error('错误说明'))
      console.log('validCode....', value)
      // value就是当前用户输入的编码，它不能与现有的编码数据（originList）重复
      // 如果重复，就验证不通过
      // if(value能与现有的编码数据（originList）重复) {
      // 1. 从originList（[{id, pid,name, code},{id, pid,name, code}]）中找出全部的编码数据
      const existCodeList = this.originList.map(item => item.code)
      console.log('existCodeList', existCodeList)
      // 2. 检查value 是否存在其中
      if (existCodeList.includes(value)) {
        callback(new Error( value + '已经存在'))
      } else{
        callback()
      }
    }
    return {
      dialogVisible:this.visible,
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      employees: [],
      rules: { // 校验规则
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur'},
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger:'blur'}
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur'},
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur'},
          { validator: validCode,trigger: 'blur'// 验证的时机
         }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur'}
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger:'blur'},
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur'}
        ]
    }
     
    }
  },
  methods: {
    handleClose(done) {
      this.$emit('close')
    },
     async loadEmployee(){ // 获取下拉列表
          const res = await getEmployeeSimple()
          console.log(res,'this.employees = res.data');
          this.employees = res.data
      },
      async loadDetail(){ // 获取编辑的数据回填
        if(this.isEdit){
          const res = await getDepartDetail(this.id)
          // console.log(res,'11111111111111111');
          this.form = res.data
        }
      },
      hSubmit(){  // 新增
        this.$refs.deptForm.validate(valid => {
            if (valid) {
              this.isEdit ? this.doEdit() : this.doAdd()
            }
          })
        // this.isEdit ? this.doEdit() : this.doAdd()
      },
      async doAdd(){
        const params = { ...this.form, pid:this.id}
      //  console.log(params,'params11111111111111');
       try {
        const res = await addtianjiazhuzu(params)
        this.$message.success(res.message)
        this.$emit('close')
        console.log(res);
        } catch (error) {

        }
      },
      async doEdit(){
        console.log('编辑执行了吗');
        const res = await updateDepartments(this.form)
        console.log(res,'1111111111111111111111111111编辑请求');
        this.$message.success(res.message)
        this.$emit('close')
      
      },
     
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>